<template>
    <uxt-page :title="title">
        <uxt-bar-group title="设置">
            <uxt-bar title="大小" desc="size">
                <template slot="right">
                    <uxt-radio-group v-model="size" size="sm" type="btn">
                        <uxt-radio classes="margin-right-sm" label="默认" value="df"></uxt-radio>
                        <uxt-radio label="sm" value="sm"></uxt-radio>
                    </uxt-radio-group>
                </template>
            </uxt-bar>
            <uxt-bar title="圆角" desc="radius | round">
                <template slot="right">
                    <uxt-radio-group v-model="radius" size="sm" type="btn">
                        <uxt-radio label="无" value=""></uxt-radio>
                        <uxt-radio classes="margin-lr-sm" label="小圆角" value="radius"></uxt-radio>
                        <uxt-radio label="大圆角" value="round"></uxt-radio>
                    </uxt-radio-group>
                </template>
            </uxt-bar>
            <uxt-color-selector-bar
                title="颜色"
                desc="bg-color=xx/颜色值"
                v-model="bgColor"
                light
                gradual
                clearable
            ></uxt-color-selector-bar>
            <uxt-bar title="禁用" desc="disabled">
                <template slot="right">
                    <uxt-switch v-model="disabled" radius size="sm"></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar title="v-model绑定">
                <template slot="right">
                    <uxt-switch v-model="vmodel" radius size="sm"></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar title="图标">
                <template slot="right">
                    <uxt-switch radius size="sm" @change="setIcon"></uxt-switch>
                </template>
            </uxt-bar>
            <uxt-bar title="文字">
                <template slot="right">
                    选中
                    <uxt-input
                        classes="solid radius margin-xs"
                        :styles="{ width: '100rpx' }"
                        @input="checkedContent = $event"
                    ></uxt-input>
                    未选中
                    <uxt-input
                        classes="solid radius margin-xs"
                        :styles="{ width: '100rpx' }"
                        @input="uncheckedContent = $event"
                    ></uxt-input>
                </template>
            </uxt-bar>
        </uxt-bar-group>
        <uxt-bar-group title="事件">
            <template slot="right">
                <text @click="events = ''">清空</text>
            </template>
            <view
                class="padding bg-white"
                v-html="events"
                style="height: 200rpx; overflow-y: auto;"
            ></view>
        </uxt-bar-group>
        <uxt-bar-group title="展示">
            <view class="padding bg-white text-center">
                <uxt-switch
                    checked
                    :size="size"
                    :bg-color="bgColor"
                    :disabled="disabled"
                    :radius="radius === 'radius'"
                    :round="radius === 'round'"
                    v-model="checked"
                    :checked-content="checkedContent"
                    :unchecked-content="uncheckedContent"
                    @change="handleChange"
                ></uxt-switch>
            </view>
            <view class="padding bg-white text-center" v-if="vmodel">{{ checked }}</view>
        </uxt-bar-group>
    </uxt-page>
</template>

<script>
import uxtBarGroup from '@xtcoder/uxt/components/uxt-bar-group.vue'
import uxtBar from '@xtcoder/uxt/components/uxt-bar.vue'
import uxtRadio from '@xtcoder/uxt/components/uxt-radio.vue'
import uxtRadioGroup from '@xtcoder/uxt/components/uxt-radio-group.vue'
import uxtSwitch from '@xtcoder/uxt/components/uxt-switch.vue'
import uxtInput from '@xtcoder/uxt/components/uxt-input.vue'
import uxtColorSelectorBar from '@xtcoder/uxt/components/uxt-color-selector-bar.vue'

export default {
    components: {
        uxtBarGroup,
        uxtBar,
        uxtRadio,
        uxtRadioGroup,
        uxtSwitch,
        uxtInput,
        uxtColorSelectorBar
    },
    data() {
        return {
            title: '开关',
            size: 'df',
            bgColor: 'theme',
            disabled: false,
            radius: '',
            vmodel: false,
            checked: true,
            checkedContent: '',
            uncheckedContent: '',
            events: ''
        }
    },
    methods: {
        setIcon(checked) {
            if (checked) {
                this.checkedContent = {
                    type: 'check'
                }
                this.uncheckedContent = {
                    type: 'close'
                }
            } else {
                this.checkedContent = ''
                this.uncheckedContent = ''
            }
        },
        handleChange(e) {
            this.events += `@change(${JSON.stringify(e)})<br />`
        }
    }
}
</script>

<style lang="scss" scoped></style>
